<template>
	<view class="page">
		<l-painter css="width: 600rpx; height: 1000rpx;">
			<!-- <l-painter-image :src="base64" css="width: 600rpx; height: 600rpx;"></l-painter-image> -->
			<!-- <l-painter-text text="AAAA"></l-painter-text> -->
			<l-painter-image v-if="dragLists.dragImg.length" :css="{width: '300rpx'}" v-for="(dragi, di) in dragLists.dragImg" :src="dragi.imagePath" :key="dragi.id"></l-painter-image>
		</l-painter>
		{{dragLists.dragImg.length}}
		<button @click="onClick(1)">添加</button>
		<button @click="onClick(0)">删除</button>
		<!-- <demo-block title="基础用法">
			<l-painter ref="painter">
				<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block">
				</l-painter-view>
				<l-painter-view
					css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;">
				</l-painter-view>
				<l-painter-view
					css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block">
				</l-painter-view>
			</l-painter>
		</demo-block>
		<demo-block title="View 容器">
			<l-painter ref="painter1">
				<l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
					<l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block">
					</l-painter-view>
					<l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block">
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block>
		<demo-block title="Text 文本">
			<l-painter>
				<l-painter-view css="background: #f5f5f5; padding: 30rpx; color: #222a29">
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" />
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
						css="text-align:center; padding-top: 20rpx; text-decoration: line-through " />
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" css="text-align:right; padding-top: 20rpx" />
					<l-painter-text text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
						css="line-clamp: 3; padding-top: 20rpx;"/>
				</l-painter-view>
			</l-painter>
		</demo-block>
		<demo-block title="Image 图片">
			<l-painter>
				<l-painter-view>
					<l-painter-text text="基础用法"
						css="margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
					<l-painter-view>
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-text text="填充方式"
						css=" margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
					<l-painter-view css="display: inline-block; padding-right: 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: contain; background: #f5f5f5" />
						<l-painter-text text="contain" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: cover; background: #f5f5f5" />
						<l-painter-text text="cover" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: fill; background: #f5f5f5" />
						<l-painter-text text="fill" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; margin-top: 30rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: none; background: #f5f5f5" />
						<l-painter-text text="none" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block>
		<demo-block title="QRcode 二维码">
			<l-painter>
				<l-painter-qrcode text="limeui.qcoon.cn" css="width: 200rpx; height: 200rpx" />
			</l-painter>
		</demo-block>
		<demo-block title="海报栗子">
			<image v-if="picture" :src="picture" mode="widthFix" style="width: 100%;"></image>
			<l-painter css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" 
					isCanvasToTempFilePath
					@success="picture = $event" 
					@fail="fail"
					@done="done"
					pathType="url"
					ref="painter"
					style="position: fixed; left: 9999rpx;"
					>
				<l-painter-image src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
				<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
					<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
					<l-painter-text text="为您挑选了一个好物?" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
				</l-painter-view>
				<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image src="https://i0.hdslb.com/bfs/feed-admin/9265afff57d00e3b2c0741bfc0aa46f97263ec13.png"  css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;"/>
					<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
						<l-painter-text text="￥" css="vertical-align: bottom"/>
						<l-painter-text text="39" css="vertical-align: bottom; font-size: 58rpx"/>
						<l-painter-text text=".39" css="vertical-align: bottom"/>
						<l-painter-text text="￥59.99" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"/>
					</l-painter-view>
					<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
						<l-painter-text text="自营" css="color: #212121; background: #ffb400;"/>
						<l-painter-text text="30天最低价" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"/>
						<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9"/>
						<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9"/>
					</l-painter-view>
					<l-painter-view css="margin-top: 30rpx">
						<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 462rpx"  text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝" ></l-painter-text>
						<l-painter-qrcode css="position: absolute; width: 128rpx; height: 128rpx; right: 0" text="limeui.qcoon.cn"></l-painter-qrcode>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <l-painter isCanvasToTempFilePath @success="picture = $event" custom-style="position: fixed; left: 200%;"
					css="width: 750rpx;  box-sizing: border-box; background: #fff; border-radius: 16rpx;">
					<l-painter-view
						css=" box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 750rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
						<l-painter-image src="https://i0.hdslb.com/bfs/feed-admin/9265afff57d00e3b2c0741bfc0aa46f97263ec13.png"
							css="object-fit: cover; object-position: 50% 50%; width: 750rpx; height: 900rpx; border-radius: 12rpx 12rpx 0 0;" />
						<l-painter-view css="margin-top: 0rpx;padding:30rpx">
							<l-painter-view css="width: 540rpx;display:inline-block; background: #eee">
								<l-painter-text text="金刚狒狒"
									css="text-align:left;  width: 540rpx;font-size:36rpx;margin-top:20rpx" />
								<l-painter-text text="做让天下百姓养得起的养生馆"
									css="text-align:left; padding-top: 20rpx; width: 540rpx;font-size:30rpx" />
							</l-painter-view>
							<l-painter-view css=" width: 150rpx; height: 150rpx;display:inline-block;">
								<l-painter-image src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg" css=" width: 150rpx; height: 150rpx;display:inline-block;" />
							</l-painter-view>
							
						</l-painter-view>
					</l-painter-view>
				</l-painter> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{uniPopup},
		data: () => ({
			base64: '',
			picture: '',
			show: false,
			
			dragLists: {
				dragImg: [
					{
						imagePath: `https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/12711822693/FocusFullshop/CkRqZnMvdDEvOTY3NjkvMTEvMjcxNDEvMTEzNjE1Mi82MjgyYWI0OUVmNWU0Y2EwZS8xZWQ2ZTM3NTM4N2RmMDY1LnBuZxIJNC10eV8wXzU1MAI47ot6QhAKDOS5oOmFkueZvemFkhAAQhMKD-eLguasouW8gOWQr-S4rRABQhAKDOeri-WNs-aKoui0rRACQgcKA-aKohAHWOWKvK0v/cr/s/q.jpg`,
						id: 'xdfdfdf'
					}
				]
			},
			row: [{
				id: 'xdfdfdf'
			}]
		}),
		created() {

		},
		methods: {
			onClick(type) {
				console.log(type)
				if(type) {
					const id = 'x'+Math.random()
					this.row.push({id})
					this.dragLists.dragImg.push({
						id,
						imagePath: `https://img11.360buyimg.com/pop/s1180x940_jfs/t1/127732/39/22251/69383/627b8e4aE98562152/f31470d79fc1ea81.jpg`
					})
				} else {
					// const index = this.row.length - 1 //Math.min(Math.floor(Math.random() * (this.row.length - 0) + 0), this.row.length - 1)
					// console.log('index', index, this.row.length - 1)
					// if(index >= 0) {
						
					// }
					console.log('0::',this.dragLists.dragImg[this.dragLists.dragImg.length-1])
					this.dragLists.dragImg = this.dragLists.dragImg.filter((img, i) => img.id != this.dragLists.dragImg[this.dragLists.dragImg.length-1].id)
					console.log('1:::',this.dragLists.dragImg.length, this.dragLists.dragImg)
				}
			},
			close() {
				this.show = false
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成')
			},
			save() {
				this.$refs.painter1.canvasToTempFilePathAsync({
					ileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log('res', res)
						this.picture = res.tempFilePath
					}
				})
				// this.$refs.poster.canvasToTempFilePath({
				// 	fileType: 'jpg',
				// 	quality: 1,
				// 	success: (res) => {
				// 		this.picture = res.tempFilePath
				// 	}
				// })
			},
			// 保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.picture,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			},
			// 打开弹窗
			open() {
			},
		}
	};
</script>

<style lang="stylus" scoped>
.w
	width 100%
	height 300rpx
	position relative
.b 
	position absolute
	left: 180rpx
	top: 18rpx
	background: rgba(#1989fa, 0.5)
	width: 80rpx
	height: 80rpx
	// transform: rotate(50deg)
	// transform-origin: bottom right
.a 
	position absolute
	left: 180rpx
	top: 18rpx
	background: #1989fa
	width: 80rpx
	height: 80rpx
	transform: rotate(50deg)
	transform-origin: 100% 50%
.page
	background #fff
.my-poster-wrap
	width 80vw
	background-color #fff
	border-radius 20rpx
.my-poster
	padding 40rpx 64rpx
.my-poster-header
	display flex
	align-items center
	margin-bottom 36rpx
.my-poster-header__avatar
	height 64rpx
	width 64rpx
	border-radius 50%
	margin-right 16rpx
.my-poster-header__info, .my-poster-header__info-name
	width 136rpx
	height 28rpx
	margin-bottom 12rpx
.my-poster-header__info-tips
	width 172rpx
	height 20rpx
.my-poster-body, .my-poster-body__pic
	height 450rpx
.my-poster-body__price
	height 28rpx
	width 152rpx
	margin-top 24rpx
.my-poster-footer
	margin-top 40rpx
	display flex
.my-poster-footer__title
	flex 1
	margin-right 24rpx
	display flex
	flex-direction column
	justify-content flex-end
.my-poster-footer__title .my-skeleton
	height 28rpx
	margin-top 20rpx
.my-poster-footer__qr
	width 120rpx
	height 120rpx
.my-poster__action
	position fixed
	left 50%
	bottom 40rpx
	transform translateX(-50%)
	z-index 9999997
	height 88rpx
	width 60%
	background linear-gradient(to right, #FF004E, #FF4242)
	color #fff
	display flex
	align-items center
	justify-content center
	border-radius 200rpx
// .my-poster__action-button
// 	display flex
// 	width 100rpx
// 	height 100rpx
// 	background-color #ff7900
// 	border-radius 50%
// 	align-items center
// 	justify-content center
.my-skeleton
	background-color #f2f3f5
.my-skeleton--animate
	animation my-skeleton-blink 1.2s ease-in-out infinite
@keyframes my-skeleton-blink
	50%
		opacity 0.6
</style>
